<template>
  <basic-container>
    <avue-crud
      :option="option"
      :data="data"
      :table-loading="loading"
      @search-change="searchChange"
      @search-reset="searchReset"
      :page.sync="page"
      @size-change="sizeChange"
      @current-change="currentChange"
      @refresh-change="refreshChange"
      @on-load="onLoad"
    >
      <template slot="menuLeft">
        <el-button type="primary" @click="handleCreate">新增</el-button>
      </template>
      <template slot="status" slot-scope="scope">
        <el-tag :type="['warning', 'danger', 'success', 'info'][scope.row.status]" effect="plain">
          <!-- {{ scope.row.status }} -->
          {{ scope.row.status_dictText }}
        </el-tag>
      </template>
    </avue-crud>
  </basic-container>
</template>

<script>
import { option, page } from '@/option/tenant/supplier/temporary'
export default {
  name: 'Temporary',
  data() {
    return {
      loading: false,
      query: {},
      data: [
        { status: '2', applyType: '1', termValidityEnd: '2022-4-22' },
        { status: '2', applyType: '3', termValidityEnd: '2022-4-22' },
        { status: '0', applyType: '1', termValidityEnd: '2022-4-22' },
        { status: '1', applyType: '1', termValidityEnd: '2022-4-22' },
        { status: '3', applyType: '1', termValidityEnd: '2022-4-22' },
        { status: '-1', applyType: '1', termValidityEnd: '2022-4-22' }
      ],
      page,
      option: { ...option, operatingButtons: this.getOperatingButtons }
    }
  },
  methods: {
    getOperatingButtons(row) {
      const edit = { text: '编辑', callback: this.openEdit }
      const view = { text: '详情', callback: this.openView }
      const drop = { text: '删除', callback: this.handleDelete }
      const delay = { text: '延期', callback: this.hadleDeplay }
      if (row.row.status === '0') {
        return [edit, view, drop]
      } else if (
        row.row.status === '2' &&
        row.row.applyType !== '3' &&
        Date.now() <= new Date(row.row.termValidityEnd).valueOf()
      ) {
        return [view, delay]
      } else if (row.row.status === '3') {
        return [edit, view]
      } else {
        return [view]
      }
    },
    refreshChange() {
      this.onLoad(this.page, this.query)
    },
    onLoad(page, params = {}) {
      // this.loading = true
      // getPage(page.currentPage, page.pageSize, Object.assign(params, this.query)).then(res => {
      //   const data = res.data.data
      //   this.page.total = data.total
      //   this.data = data.records
      //   this.loading = false
      // })
    },
    searchReset() {
      this.query = {}
      this.onLoad(this.page)
    },
    searchChange(params, done) {
      this.query = params
      this.page.currentPage = 1
      this.onLoad(this.page, params)
      done()
    },
    currentChange(currentPage) {
      this.page.currentPage = currentPage
    },
    sizeChange(pageSize) {
      this.page.pageSize = pageSize
    },
    handleCreate() {
      this.$quickDrawer({
        title: '新增',
        width: '90%',
        component: require('@/views/tenant/supplier/temporary/form').default,
        props: { type: 'add' },
        on: {
          refresh: () => {
            this.onLoad(this.page)
          }
        },
        buttons: [
          { text: '保存', callback: 'handleSave' },
          { text: '提交', callback: 'handleSubmit' },
          { text: '取消', callback: 'handleCancel' }
        ]
      })
    },
    hadleDeplay() {
      this.$quickDrawer({
        title: '延期',
        width: '90%',
        component: require('@/views/tenant/supplier/temporary/extend').default,
        on: {
          refresh: () => {
            this.onLoad(this.page)
          }
        },
        buttons: [
          { text: '保存', callback: 'handleSave' },
          { text: '提交', callback: 'handleSubmit' },
          { text: '取消', callback: 'handleCancel' }
        ]
      })
    }
  }
}
</script>

<style></style>
